<!-- 已过时 -->
<template>
  <el-collapse v-model="expandAll">
    <el-collapse-item
      v-if="changeMap && changeMap.size > 0"
      :title="t('studentPaper.diff.title')"
      name="1"
    >
      <el-descriptions :column="3" border label-width="80">
        <template v-for="([key, value], index) in basicChangeMapEntries" :key="index">
          <el-descriptions-item :label="t('studentPaper.diff.modifyField')" width="220">
            {{ key }}
          </el-descriptions-item>
          <el-descriptions-item :label="t('studentPaper.diff.modifyBefore')" width="220">
            <template v-if="key === '附件' || key === 'Attachment'">
              <IMRUpload v-model="value.oldValue" disabled />
            </template>
            <template v-else>
              {{ value.oldValue }}
            </template>
          </el-descriptions-item>
          <el-descriptions-item :label="t('studentPaper.diff.modifyAfter')" width="220">
            <template v-if="key === '附件' || key === 'Attachment'">
              <IMRUpload v-model="value.newValue" disabled />
            </template>
            <template v-else>
              {{ value.newValue }}
            </template>
          </el-descriptions-item>
        </template>
      </el-descriptions>
    </el-collapse-item>
  </el-collapse>
</template>

<script setup lang="ts">
import { compareAndFilter } from '@/utils'
import { useI18n } from 'vue-i18n'
import { formatDate } from '@/utils/formatTime'
import { StudentPaperVO } from '@/api/core/studentpaper'
import IMRUpload from '@/components/IMRUpload/index.vue'

const props = defineProps<{
  paperInfo: StudentPaperVO
  paperInfoArchive: StudentPaperVO
}>()

const { t } = useI18n()

interface ChangedValue {
  oldValue: string
  newValue: string
}

const changeMap = ref<Map<string, ChangedValue>>()

const basicChangeMapEntries = computed(() => Array.from((changeMap.value ?? new Map()).entries()))

const expandAll = ref(['1'])
const dateFields = ['paperTime']
const ignoreFields = [
  'id',
  'journalId',
  'accountId',
  'mentorId',
  'reviewStatus',
  'reviewTime',
  'creator',
  'createTime',
  'updater',
  'updateTime',
  'deleted',
  'tenantId'
]

const init = () => {
  // 记录改动的Map
  changeMap.value = new Map<string, ChangedValue>()

  // 计算出新值有哪些
  const newValue = compareAndFilter(props.paperInfo, props.paperInfoArchive)
  // 计算出旧值有哪些
  const oldValue = compareAndFilter(props.paperInfoArchive, props.paperInfo)

  // 遍历新值
  for (const key in newValue) {
    if (ignoreFields.includes(key)) {
      continue
    }
    changeMap.value.set(t(`studentPaper.fields.${key}`), {
      oldValue: dateFields.includes(key) ? formatDate(oldValue[key], 'YYYY-MM-DD') : oldValue[key],
      newValue: dateFields.includes(key) ? formatDate(newValue[key], 'YYYY-MM-DD') : newValue[key]
    })
  }
}

onMounted(() => {
  init()
})
</script>
